import React, {Component} from 'react'
import './index.css'
import Swiper, { FreeMode } from 'swiper';
// import 'swiper/swiper.min.css'

class SwipterText extends Component{
  constructor(props){
    super(props)
    this.state={
      slidelist:[]
    }
  }
  componentDidMount(){
    var mySwiper = new Swiper('.swiper', {
      autoplay: true,//可选选项，自动滑动
      direction: 'vertical',
      loop:true,
      updateOnWindowResize: true,
      slidesPerView : 5,  
      slidesPerview:'auto'
    })

    let arr = []
    for (let i=0;i<10;i++){
      arr.push({
        name: `slider${i}`,
        color: `rgb(${parseInt(Math.random()*225)},${parseInt(Math.random()*225)},${parseInt(Math.random()*225)})`
      })
    }
    

    
    //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
    // new Swiper('.swiper')
    // var mySwiper = document.querySelector('.swiper').swiper
    // mySwiper.slideNext();
  }
  render(){
    return (
      <div className="swiper">
        <div className="swiper-wrapper">
          <div className="swiper-slide red">slider1</div>
          <div className="swiper-slide green">slider2</div>
          <div className="swiper-slide yellow">slider3</div>
        </div>
      </div>
    )
  }
}

export default SwipterText
